// .bg-main {
//   @apply bg-gray-50 transition-all;
//   @apply dark:bg-[#141414];
// }

// .hover-bg-main {
//   @apply hover:bg-gray-200;
//   @apply dark:hover:bg-[#262727];
// }

.bg-card {
  @apply bg-gray-100 transition-all;
  @apply dark:bg-[#222];
  @apply dark:hover:bg-neutral-800;
}

.hover-bg-card {
  @apply hover:bg-gray-200 transition-all duration-300;
  @apply dark:hover:bg-[#262727];
}

.text-main {
  @apply text-slate-700;
  @apply dark:text-slate-200;
}

.text-active {
  @apply text-emerald-400;
}

.text-title {
  @apply text-slate-400;
  @apply dark:text-[#999];
}

.text-desc {
  @apply text-slate-500;
  @apply dark:text-neutral-400;
}

.text-tag {
  @apply text-slate-400;
  @apply dark:text-stone-500;
}

.button {
  @apply flex bg-emerald-600 rounded-full justify-center items-center h-8 text-sm transition-all;
  @apply text-white;
  @apply hover:bg-emerald-700;
}

.button-outline {
  @apply flex rounded-full justify-center items-center h-8 text-sm transition-all border;
  @apply hover:border-emerald-500 hover:text-emerald-500;
}

.button-text {
  @apply flex bg-[#e6e6e6] rounded justify-center items-center h-8 text-sm transition-all cursor-pointer;
  @apply dark:bg-[#333] dark:text-white;
  @apply hover:text-emerald-500;
}
